SideButton Marketing Website Features — Embed Buttons — Knowledge Module Reference

What This Is

Feature page for SideButton Embed Buttons — contextual one-click automation buttons that appear inline on websites. The extension detects page context, shows relevant workflow buttons, and executes on click. Uses the shared FeatureHero component with "Contextual Automation" badge (accent/orange color). Includes: 4-step "How Embed Buttons Work" section with numbered cards, interactive Gmail compose mockup with 3 embed buttons (Draft Reply, Summarize Thread, Extract Tasks), Supported Platforms section with dynamically-generated platform cards from getEmbedSupportedPlatforms() plus a static "Any Website" card with dashed border, Related Features 3-card grid, and dark FeatureCTA. Has BreadcrumbList and HowTo JSON-LD schemas for SEO.

URL Patterns

Pattern	Description
/features/embed-buttons	Embed buttons feature page

Page Structure

+--[Header: sticky banner]---------------------------+
|                                                     |
| [1. HERO — FeatureHero component]                   |
|   Badge: "Contextual Automation" (orange/accent)    |
|   H1: "Embed SideButton Buttons"                   |
|   Subtitle + 2 CTA buttons                          |
|   "Get Started Free" -> docs install                |
|   "Documentation" -> docs home                      |
|                                                     |
| [2. HOW IT WORKS — bg-slate-50]                      |
|   "How Embed Buttons Work" heading                  |
|   4-column grid (md:grid-cols-2 lg:grid-cols-4)    |
|   Each: numbered circle (bg-primary) + title + desc |
|   1. Extension Detects Context                      |
|   2. Relevant Buttons Appear                        |
|   3. One Click Triggers Workflow                    |
|   4. AI-Powered Results                             |
|                                                     |
| [3. INTERACTIVE DEMO — "See It In Action"]          |
|   Gmail compose browser mockup in bg-slate-100:     |
|     Browser bar: dots + "mail.google.com/compose"   |
|     To: [email protected]                            |
|     Subject: Re: Project Update                     |
|     Compose textarea (placeholder)                   |
|     SideButton embed buttons bar:                   |
|       "SideButton:" label + 3 buttons:              |
|       Draft Reply (primary/green) |                 |
|       Summarize Thread (slate) |                    |
|       Extract Tasks (slate)                         |
|     Send (blue) + Discard buttons                   |
|   Caption: "Embed buttons appear automatically..."  |
|                                                     |
| [4. SUPPORTED PLATFORMS — bg-slate-50]               |
|   "Supported Platforms" heading                     |
|   grid-cols-2 md:grid-cols-4 of platform cards      |
|   Dynamic cards from getEmbedSupportedPlatforms()   |
|   Each: colored icon container + name + count       |
|   + "Any Website" static card (dashed border, +icon)|
|                                                     |
| [5. RELATED FEATURES — bg-slate-50, 3-card grid]    |
|   Chat | Workflow Engine | Integrations              |
|                                                     |
| [6. CTA — FeatureCTA component, bg-slate-900]       |
|   "Get Embed SideButton Buttons"                    |
|   "Get Started Free" + "Browse Integrations"        |
|                                                     |
+--[Footer: 6-column grid]---------------------------+

Key Elements

Hero Section (FeatureHero component)

Element	Selector	Notes
Hero section	section.relative.overflow-hidden (first)	Shared FeatureHero
Badge	.inline-flex.rounded-full with "Contextual Automation"	Orange: bg-accent/10 text-accent border-accent/20
Badge dot	span.w-1\\.5.h-1\\.5.rounded-full.animate-pulse	Pulsing orange dot
Hero heading	h1 "Embed SideButton Buttons"	text-4xl md:text-5xl lg:text-6xl
Hero subtitle	p "One-click automation buttons that appear in context..."	text-lg md:text-xl
Get Started Free	a[href*="docs.sidebutton.com/installation"]	bg-primary button
Documentation	a[href*="docs.sidebutton.com"] (outline)	bg-white border button

How It Works Section

Element	Selector	Notes
Section	section.py-16.bg-slate-50 (first)	Slate background
Section heading	h2 "How Embed Buttons Work"	text-2xl md:text-3xl
Subtitle	p "Contextual automation that appears when you need it"	text-slate-600
Step grid	.grid.md\\:grid-cols-2.lg\\:grid-cols-4.gap-6	Responsive: 1/2/4 columns
Step card	.bg-white.rounded-xl.border.border-slate-200.p-6.relative	White card with border
Step number	.w-10.h-10.bg-primary.text-white.rounded-full	Primary color circle, bold number
Step 1: Detect	h3 "Extension Detects Context"	"SideButton recognizes which page you're on and what you're doing..."
Step 2: Appear	h3 "Relevant Buttons Appear"	"Contextual automation buttons show up in the UI..."
Step 3: Trigger	h3 "One Click Triggers Workflow"	"Click a button to run the workflow..."
Step 4: Results	h3 "AI-Powered Results"	"Workflows can use AI to generate content..."

Interactive Demo Section (Gmail Mockup)

Element	Selector	Notes
Section	section.py-16 (Demo)	White background
Section heading	h2 "See It In Action"	text-2xl md:text-3xl
Subtitle	p "Example: Gmail compose with SideButton embed buttons"	text-slate-600
Mockup container	.bg-slate-100.rounded-2xl.p-4.md\\:p-8	Outer gray frame
Browser window	.bg-white.rounded-xl.shadow-lg.overflow-hidden.border.border-slate-200	Inner white card
Browser bar	.bg-slate-50.border-b.border-slate-200.px-4.py-3	Contains dots + URL
Traffic lights	3x .w-3.h-3.rounded-full (bg-red-400, bg-yellow-400, bg-green-400)	Browser window dots
URL bar	.bg-slate-100.rounded-md.px-3.py-1\\.5.text-xs.font-mono	Shows "mail.google.com/compose"
To field	Static div	"[email protected]" in bg-slate-50
Subject field	Static div	"Re: Project Update" in bg-slate-50
Compose area	.border.border-slate-200.rounded-lg	Contains textarea + embed buttons bar
Placeholder text	.p-4.min-h-\\[120px\\].text-sm.text-slate-400	"Write your message..."
Embed buttons bar	.border-t.border-slate-200.px-4.py-3.bg-slate-50	Contains label + 3 buttons
SideButton label	span.text-xs.text-slate-400	"SideButton:" prefix
Draft Reply button	button "Draft Reply"	bg-primary text-white rounded-full, primary embed button
Summarize Thread button	button "Summarize Thread"	bg-slate-200 text-slate-700 rounded-full
Extract Tasks button	button "Extract Tasks"	bg-slate-200 text-slate-700 rounded-full
Send button	button "Send"	bg-blue-600 text-white, Gmail-styled
Discard button	button "Discard"	text-slate-600, plain button
Caption	.mt-6.flex.items-center.justify-center.gap-2.text-sm.text-slate-500	Arrow icon + "Embed buttons appear automatically in context"

Supported Platforms Section

Element	Selector	Notes
Section	section.py-16.bg-slate-50 (Platforms)	Slate background
Section heading	h2 "Supported Platforms"	text-2xl md:text-3xl
Subtitle	p "Embed buttons work on these platforms and any custom website"	text-slate-600
Platform grid	.grid.grid-cols-2.md\\:grid-cols-4.gap-4	2-column mobile, 4-column desktop
Platform card (dynamic)	a[href^="/integrations/"]	White card, icon container + name + "{count} workflows"
Platform icon container	.w-12.h-12.rounded-xl with background-color: ${platform.color}20	20% opacity tinted background
Platform logo	img.w-6.h-6.object-contain	From platform.logoUrl
Platform logo fallback	.w-6.h-6.rounded with bg-color + white text	First letter initial
Platform name	h3.font-semibold.text-slate-900.text-sm	group-hover:text-primary
Platform count	p.text-xs.text-slate-500	"{count} workflows" — dynamic from getWorkflowsByPlatform
Any Website card	.bg-white.rounded-xl.border.border-slate-200.border-dashed	Static card, dashed border, no link
Any Website icon	.w-12.h-12.bg-primary\\/10 with plus SVG icon	Primary color plus sign
Any Website heading	h3 "Any Website"	font-semibold text-sm
Any Website subtitle	p "Custom integrations"	text-xs text-slate-500

Related Features

Element	Selector	Notes
Section	section.py-12.bg-slate-50	Continuous slate background
Section heading	h2 "Related Features"	text-xl
Chat card	a[href="/features/chat"]	h3 "SideButton AI Assistant", hover:border-primary
Workflows card	a[href="/features/workflow-engine"]	h3 "SideButton Workflows"
Integrations card	a[href="/integrations"]	h3 "Integrations"

CTA Section (FeatureCTA component)

Element	Selector	Notes
CTA container	.bg-slate-900.rounded-2xl	Dark background
Section heading	h2 "Get Embed SideButton Buttons"	text-white
Subtitle	p "Install SideButton and get one-click automation buttons..."	text-slate-300
Get Started Free	a[href*="docs.sidebutton.com/installation"]	bg-primary button
Browse Integrations	a[href="/integrations"]	bg-white/10 button

Data Model

Static feature page with dynamic platform data from marketplace module. Content rendered at build time.

Field	Type	Description
howItWorks	array[4]	Step data: step number (string), title, description
embedPlatforms	array[N]	Dynamic: from getEmbedSupportedPlatforms() — platforms with embed button support, featured first
workflowCounts	computed	Per-platform: getWorkflowsByPlatform(platform.id).length computed at build time
Gmail mockup data	hardcoded HTML	To: [email protected], Subject: Re: Project Update, 3 embed buttons
Embed button types	array[3]	Draft Reply (primary), Summarize Thread (slate), Extract Tasks (slate)
Related features	array[3]	Chat (/features/chat), Workflow Engine (/features/workflow-engine), Integrations (/integrations)
SEO schemas	array[2]	BreadcrumbList (Home > Features > Embed SideButton Buttons), HowTo (3 steps)

States & Variations

State	Trigger	Visual Indicator
Default	Page load	All sections visible, mockup buttons styled but non-functional
Cookie dialog	First visit	Cookie Notice dialog overlay
SideButton FAB	Extension installed	Green "S" + "Click" button bottom-right
Hero badge pulse	Continuous	Orange dot pulses via animate-pulse
Draft Reply hover	Hover on mockup button	bg-primary -> bg-primary-hover transition
Summarize/Extract hover	Hover on mockup buttons	bg-slate-200 -> bg-slate-300 transition
Send hover	Hover on Send button	bg-blue-600 -> bg-blue-700 transition
Discard hover	Hover on Discard button	adds bg-slate-100
Platform card hover	Hover on platform link	border -> border-primary + shadow-md, name text -> primary
Related card hover	Hover on card	border-primary + shadow-md, h3 text primary
Responsive mobile (<= 768px)	Small viewport	How It Works single column, platform grid 2-column, mockup padding reduced (p-4), CTA buttons stack
Responsive tablet (768-1024px)	Medium viewport	How It Works 2-column, platform grid 4-column
Responsive desktop (>= 1024px)	Large viewport	How It Works 4-column, full layout
Any Website card	Always static	Dashed border, no hover link effect, no href

Common Tasks

Verify Page Loads Correctly

1. Navigate to /features/embed-buttons
2. Verify hero heading "Embed SideButton Buttons" is visible
3. Verify "Contextual Automation" badge with pulsing orange dot
4. Scroll through all 6 sections and verify none are missing
5. Verify Gmail mockup renders with all 3 embed buttons

Verify How It Works Steps

1. Scroll to "How Embed Buttons Work" section
2. Verify 4 step cards with numbered circles (1-4, primary green background)
3. Verify step titles: Extension Detects Context, Relevant Buttons Appear, One Click Triggers Workflow, AI-Powered Results
4. Each card should have description text below the title
5. On mobile, verify cards stack to single column

Verify Gmail Mockup

1. Scroll to "See It In Action" section
2. Verify browser mockup frame with traffic light dots (red, yellow, green)
3. Verify URL bar shows "mail.google.com/compose"
4. Verify email fields: To "[email protected]", Subject "Re: Project Update"
5. Verify compose area with placeholder "Write your message..."
6. Verify "SideButton:" label and 3 embed buttons: Draft Reply (green), Summarize Thread (gray), Extract Tasks (gray)
7. Verify Send (blue) and Discard buttons below compose area
8. Verify caption text "Embed buttons appear automatically in context" with arrow icon

Verify Supported Platforms

1. Scroll to "Supported Platforms" section
2. Count platform cards (dynamic, depends on marketplace data)
3. Verify each card has: colored icon container, platform name, workflow count
4. Verify "Any Website" card is present with dashed border and plus icon
5. Click a platform card and verify navigation to /integrations/{slug}
6. Verify "Any Website" card is NOT clickable (no link)

Verify All Links Work

1. Check hero "Get Started Free" -> docs.sidebutton.com/installation
2. Check hero "Documentation" -> docs.sidebutton.com
3. Check platform cards -> /integrations/{slug} for each
4. Check Related Features: /features/chat, /features/workflow-engine, /integrations
5. Check CTA "Get Started Free" -> docs install
6. Check CTA "Browse Integrations" -> /integrations

Verify Responsive Layout

1. Set viewport to 375px (mobile)
2. Verify How It Works grid becomes single column
3. Verify platform grid becomes 2-column
4. Verify mockup has reduced padding (p-4 instead of p-8)
5. Set viewport to 768px and verify How It Works 2-column, platforms 4-column
6. Set viewport to 1280px+ and verify How It Works 4-column layout

Tips

• This page uses the "accent" badge color (orange) — the only feature page to do so; chat and workflow-engine use "primary" (teal), ai-automation uses "success" (green)
• The Gmail mockup is purely HTML/CSS with no JavaScript — the buttons have hover effects but do not trigger any actions
• Draft Reply button is styled distinctly (bg-primary text-white) compared to Summarize Thread and Extract Tasks (bg-slate-200 text-slate-700) to indicate the primary action
• The "Any Website" card uses border-dashed to visually distinguish it from the linked platform cards
• Platform cards use getEmbedSupportedPlatforms() (not getPlatforms()) — this filters to platforms with embed button support and sorts featured platforms first
• Workflow counts per platform are computed at build time via getWorkflowsByPlatform(platform.id).length
• The mockup URL bar uses font-mono for the "mail.google.com/compose" text to match browser chrome appearance
• Multiple consecutive bg-slate-50 sections (Platforms, Related Features) create a continuous gray area

Gotchas

• No client-side JavaScript: This page has no <script> tags — the mockup buttons are static HTML with CSS hover effects only, not interactive demos
• Mockup buttons are real HTML buttons: The Draft Reply, Summarize Thread, Extract Tasks, Send, and Discard are all <button> elements — automation tools will detect them as interactive, but clicking them does nothing
• Platform cards are dynamic at build time: The number and order of platform cards depends on getEmbedSupportedPlatforms() at build — the actual platforms shown may differ from what is documented here
• "Any Website" card has no link: Unlike the platform cards which are <a> tags, the "Any Website" card is a <div> — clicking it navigates nowhere
• Platform icon container opacity trick: The icon background uses ${platform.color}20 (hex + 20% alpha suffix) which may render differently across browsers that don't support 8-digit hex colors
• How It Works grid uses 3 breakpoints: grid-cols-1 (default) / md:grid-cols-2 / lg:grid-cols-4 — the intermediate 2-column state at 768-1024px means steps 1-2 appear as a row and 3-4 as a row